<template>
  <div>
    <el-row>
      <el-col>
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          text-color="rgb(80, 80, 80)"
          active-text-color="blue"
          active-text-background="rgb(231, 244, 255)"
          default-active="/head/userManagement"
          :router="true"
        >
          <el-submenu v-for="item in routerLink" :key="item.id" :index="item.id+''">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item v-for="ite in item.children" menu-trigger="" :key="ite.id" :index="ite.route">{{ite.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {routerLink} from "@/router/router-config.js"
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath){
      console.log(key, keyPath,1);
    }
  },
  computed:{
    list(){
      return this.$store.getters.listed
    },
    routerLink(){
      return routerLink(this.list)
    }
  },
  created(){
    
  }
};
</script>

<style>
</style>